<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<image
			src="http://112.124.50.179:8888/imgs/home/popbg.png"
			mode="widthFix"
			class="popBgc"
		></image>
		<view class="popup_con">
			<view class="fixedTitle_qf">
				<view class="left"></view>
				<view class="middle">祈福</view>
				<view class="right">
					<u-icon
						@click="closeMore"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>

			<view class="qifu_input">
				<view style="height: 540rpx; width: 100%" v-if="!isFinish">
					<up-textarea
						disableDefaultPadding
						:adjustPosition="false"
						placeholderClass="placeholderClass"
						v-model="message"
						placeholder="请输入要祈福的内容"
						count
						height="470rpx"
						border="none"
						maxlength="200"
					></up-textarea>
				</view>

				<view v-else class="qifu_finish">
					<image
						src="http://112.124.50.179:8888/imgs/worship/worship_qifu.png"
						mode=""
					></image>
					<text>祈福已传达，愿您所求皆成真</text>
				</view>

				<view class="qifu_input_footerBox">
					<view class="qifu_footerBox_contain"></view>
					<view class="qifu_footerBox_fixed">
						<view v-if="isFinish" class="qifu_footerBox_fixed_box" @click="closeMore">
							返回
						</view>
						<view v-else class="qifu_footerBox_fixed_box" @click="clickQifu">祈福</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
import { ref } from 'vue';
import myModel from '/components/model/index.vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import WorshipApi from '@/API/worship';
const worshipApi = new WorshipApi();
//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const show = ref(false);
const message = ref('');
const isFinish = ref(false); //是否输入完成
const { peopleId } = defineProps({
	peopleId: {
		type: String,
		required: true,
		default: ''
	}
});
const emits = defineEmits(['finish']);
const clickQifu = () => {
	if (!message.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入祈福内容'
		});
	}
	worshipApi
		.auspiciousness({
			worshipPeopleId: peopleId,
			auspiciousnessContent: message.value
		})
		.then((res) => {
			uni.showToast({
				icon: 'none',
				title: '祈福成功'
			});
			isFinish.value = true;
			message.value = '';
			emits('finish');
		})
		.catch(() => {});
};
const closeMore = () => {
	show.value = false;
	isFinish.value = false;
	message.value = '';
};

defineExpose({
	show
});
</script>

<style lang="scss">
::v-deep.u-popup__content {
	padding: 0 !important;
}

.popup_con {
	position: relative;
	background-image: url('http://112.124.50.179:8888/imgs/home/popbg.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.popBgc {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

.fixedTitle_qf {
	width: 100%;
	font-size: 32rpx;
	color: #156778;
	padding-top: 60rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.left {
		padding-left: 32rpx;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}

.qifu_input {
	padding: 0 32rpx;
	height: 700rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: #f1f6f3 !important;
		width: 100% !important;
		padding: 32rpx 40rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}

	.qifu_finish {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		image {
			width: 400rpx;
			height: 400rpx;
		}

		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			margin-top: 48rpx;
		}
	}

	.qifu_submitBtn {
		width: 400rpx;
		height: 88rpx;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #524630;
		line-height: 88rpx;
		letter-spacing: 1px;
		text-align: center;
		margin-top: 82rpx;
	}

	.qifu_input_footerBox {
		width: 100%;

		.qifu_footerBox_contain {
			height: 128rpx;
		}

		.qifu_footerBox_fixed {
			position: fixed;
			padding: 20rpx 0;
			box-sizing: border-box;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);

			.qifu_footerBox_fixed_box {
				width: 400rpx;
				height: 88rpx;
				background: #f3e0bb;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #524630;
				line-height: 88rpx;
				letter-spacing: 1px;
				text-align: center;
			}
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.spin-element {
	animation: spin 1s linear infinite;
	/* 其他样式，比如宽高、颜色等 */
}
</style>
